<template>
    <div class="SafeCenter">
        <div><span style="margin-left: 5px;font-size: 30px">纵横安全</span></div>
        <b>密码管理</b>
        <el-divider></el-divider>
        <em style="margin-left: -800px;font-size: 25px"><b>修改密码</b></em><br>
        <div class="edit">
            <el-form class="user-account-key" ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="原密码" prop="password">
                    <el-input type="password" placeholder="请输入原密码" @blur="getM" show-password
                              v-model="form.password"></el-input>
                    <p v-show="pwdShow" style="color: red;font-size: 10px;">该密码不是原密码</p>
                </el-form-item>
                <br>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" placeholder="请设置新密码" show-password v-model="form.newPassword"></el-input>

                </el-form-item>
                <el-form-item label="确认密码" prop="newPassword2">
                    <el-input type="password" placeholder="请确认新密码" show-password v-model="form.newPassword2"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">保存</el-button>
                    <el-button @click="$refs['form'].resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'SafeCenter',
        data() {
            //此处即表单发送之前验证
            let validateNewPassword = (rule, value, callback) => {
                if (value === this.form.password) {
                    callback(new Error('新密码不能与原密码相同!'))
                } else {
                    callback()
                }
            }
            let validateNewPassword2 = (rule, value, callback) => {
                if (value !== this.form.newPassword) {
                    callback(new Error('与新密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
                pwdShow:false,
                form: {
                    password: '',
                    newPassword: '',
                    newPassword2: '',
                },
                rules: {
                    password: [
                        {required: true, message: '请输入原密码', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请设置新密码', trigger: 'blur'},
                        {validator: validateNewPassword, trigger: 'blur'},
                        {min: 3, max: 15, message: '长度在 3 ~ 15 个字符以内', trigger: 'blur'}
                    ],
                    newPassword2: [
                        {required: true, message: '请确认新密码', trigger: 'blur'},
                        {validator: validateNewPassword2, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            getM(){
                this.$http.post("user/getPwd",{pwd:this.form.password,id:localStorage.getItem("id")}).then(response=>{
                    if(response.data===1){
                        this.pwdShow=false;
                    }else{
                        this.pwdShow=true;
                    }
                })
            },
            onSubmit(formName) {

                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.$http.post("user/updPwd", {
                            password: this.form.newPassword,
                            id: localStorage.getItem("id")
                        }).then(response => {
                            if (response.data === 1) {
                                this.$notify({
                                    title: '成功',
                                    message: '小主.密码修改成功,请重新登录!',
                                    type: 'success'
                                });
                                sessionStorage.clear();
                                localStorage.clear();
                                this.$router.replace({name: '/'})
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: '小主.密码修改失败',
                                    type: 'warning'
                                });
                            }
                        })

                    } else {
                        this.$message.error('请正确填写表单')
                        return false
                    }

                })
            },
        }
    }
</script>

<style scoped>
    .SafeCenter {
        box-shadow: 0 2px 4px hotpink, 0 0 6px hotpink;
        height: 750px;
        width: auto;
        background-color: #FFB6C1;
    }

    .edit {
        /*border: 1px solid black;*/
        margin: auto;
        margin-left: 210px;
        margin-top: 50px;
    }
</style>
